<template>
  <div v-if="cartListData.length !== 0">
    <div class="top"><van-icon name="shop-o" /> &nbsp;&nbsp;购物商城</div>
    <div class="content">
      <van-swipe-cell v-for="item in cartList" :key="item.proid">
        <div class="box">
          <CartChild>
            <van-checkbox v-model="item.checked"></van-checkbox>
          </CartChild>
          <div class="right">
            <CartChild>
              <van-card
                :price="item.price | filtersprice"
                :title="item.proname"
                class="goods-card"
                :thumb="item.img1"
              />
            </CartChild>
            <CartChild>
              <van-stepper
                v-model="item.num"
                theme="round"
                button-size="22"
                disable-input
              />
            </CartChild>
          </div>
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="onSubmit(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <div>
      <van-submit-bar
        :price="Allprice"
        :disabled="cartListData.length === 0"
        button-text="提交订单"
      >
        <van-checkbox v-model="Allchecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
  <div v-else>
    <van-empty
      description="没有商品赶紧去购物啦"
      image="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
    />
  </div>
</template>

<script>
import CartChild from '@/views/Cart/CartChild.vue'
import { mapGetters, mapMutations, mapState } from 'vuex'
export default {
  data () {
    return {
      itemnum: 0,
      Data: null
    }
  },
  methods: {
    ...mapMutations('cart', ['delGoods']),
    onSubmit (proid) {
      this.delGoods(proid)
    }
  },
  components: {
    CartChild
  },
  computed: {
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['Allprice']),
    Allchecked: {
      get () {
        return this.cartListData.every(item => item.checked)
      },
      set (value) {
        this.cartListData.map(item => (item.checked = value))
      }
    },
    cartListData: {
      get () {
        return this.$store.state.cart.cartList
      }
    }
  },
  filters: {
    filtersprice (value) {
      return value.toFixed(2)
    }
  }
}
</script>
<style scoped>
::v-deep(.van-swipe-cell) {
  /* display: flex; */
  width: 100%;
  height: 140px;
  background: pink;
}

.box {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  background-color: #fafafa;
  border-bottom: 1px solid #c0c0bf;
}
.right {
  flex: 1;
}

::v-deep(.van-stepper) {
  margin-right: 30px;
  text-align: right;
}

::v-deep(.van-card__price) {
  color: var(--ThemeColors);
}
::v-deep(.van-button--normal) {
  height: 140px;
}
::v-deep(.van-submit-bar) {
  margin-bottom: 50px;
}
::v-deep(.van-submit-bar__button) {
  height: 40px;
}
.top {
  height: 30px;
  display: flex;
  padding-left: 10px;
  align-items: center;
  border-bottom: 1px solid #c0c0bf;
}
.content {
  padding-bottom: 100px;
}

::v-deep(.van-checkbox__icon--checked .van-icon) {
  background-color: var(--ThemeColors);
  border-color: var(--ThemeColors);
}
::v-deep(.van-empty) {
  padding: 50% 0;
}
::v-deep(.van-empty__image) {
  width: 100px;
  height: 100px;
}
</style>
